<template>
  <div class="app-container table-container">
    <el-row>
      <el-col :span="24">
        <el-col :span="20">
          <el-form ref="queryForm" :model="searchDate" :inline="true" label-width="68px">
            <el-form-item label="审核状态">
              <el-select
                v-model="searchDate.adr"
                filterable
                placeholder="请选择审核状态"
                size="small"
                @change="changeAuditState"
              >
                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val" />
              </el-select>
            </el-form-item>
            <el-form-item label="票务种类">
              <el-select v-model="searchDate.tictKind" filterable placeholder="请选择票务种类" @change="changeAuditState">
                <el-option
                  v-for="kinds in tickValue"
                  :key="kinds.code"
                  :label="kinds.name"
                  :value="kinds.name"
                  size="small"
                >{{ kinds.name }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="票务名称" prop="tictName">
              <el-input
                v-model="searchDate.tictName"
                filterable
                size="small"
                placeholder="请输入票务名称查询票务基本信息"
                @change="changeAuditState"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small" @cliclk="querySalesPlan">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="medium" @click="exportAble">导出
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            @click="addSalesPlan"
          >新增
          </el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-table
      :data="salesPlanData"
      size="mini"
      border
      style="width:100%;"
      @current-change="userChge"
    >
      <el-table-column prop="tictName" label="票务名称" min-width="50"/>
      <el-table-column prop="tictCode" label="票务编码" min-width="160"/>
      <!--            <el-table-column prop="merchName" label="商户名称" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="salName" label="票面名称" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="code" label="售票计划代码" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="salTp" label="票面计费类型" min-width="50"></el-table-column>-->
      <el-table-column prop="tictKind" label="票务种类" min-width="50">
        <template slot-scope="scope">
          {{replaceOneDictionarCode(tickValue,scope.row.tictKind)}}
        </template>
      </el-table-column>
      <el-table-column prop="yardName" label="场地名称" min-width="50">
        <template slot-scope="scope">
          {{replaceOneDictionarCode(yardOptions,scope.row.yardName)}}
        </template>
      </el-table-column>
      <el-table-column prop="startShowTime" label="播出时期" min-width="50">
        <template slot-scope="scope">
          {{parseTime(scope.row.startShowTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="售价" min-width="50"/>
      <el-table-column prop="stock" label="库存" min-width="50"/>
      <el-table-column prop="surplusStock" label="剩余库存" min-width="50"/>
      <el-table-column prop="recedeTick" label="退票" min-width="50">
        <template slot-scope="scope">
          {{ scope.row.recedeTick === '100' ? '可退票' : '' }}
          {{ scope.row.recedeTick === '0' ? '不可退票' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="adr" label="审核状态" min-width="50">
                        <template slot-scope="scope">
                            {{scope.row.adr === 'NoSmt' ? '未提交': ''}}
                            {{scope.row.adr === 'Review' ? '审核中': ''}}
                            {{scope.row.adr === 'Pass' ? '通过': ''}}
                            {{scope.row.adr === 'Deny' ? '拒绝': ''}}
                        </template>
                    </el-table-column>
      <!--            <el-table-column prop="reseDays" label="预订天数(天)" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="startTime" label="发售时间" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="endTime" label="结束时间" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="dayNum" label="日发售数量(张)" min-width="60"></el-table-column>-->
      <!--            <el-table-column prop="price" label="售票价格(元)" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="recedeTick" label="退票" min-width="50"></el-table-column>-->

      <el-table-column width="260" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            :disabled="scope.row.adr==='Review' || scope.row.adr==='Pass'"
            icon="el-icon-check"
            @click="submitAudit( scope.row )"
          >提交
          </el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="scope.row.adr==='Review' || scope.row.adr==='Pass'"
            icon="el-icon-edit"
            @click="editSalesPlan( scope.row )"
          >编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            :disabled="scope.row.adr==='Review' || scope.row.adr==='Pass'"
            icon="el-icon-delete"
            @click="deleteSalesPlan( scope.row )"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="tictPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="tictPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tictPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
    <div v-if="addDialogVisible">
      <el-dialog title="新增发售计划" :visible.sync="addDialogVisible " width="70%" append-to-body>
        <addSalesPlan ref="addSalesPlan" @close="closeDialog"/>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveAddDlg">确 定</el-button>
          <el-button @click="cancelAddDlg">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-if="editDialogVisible">
      <el-dialog
        :before-close="cancelEditDlg"
        title="修改发售计划"
        :visible.sync="editDialogVisible"
        width="70%"
        append-to-body
      >
        <editSalesPlan ref="editSalesPlan" :sales-plan-uuid="currentEdituuid" @close="closeDialog"/>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveEditDlg">确 定</el-button>
          <el-button @click="cancelEditDlg">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getDataForSP, writePageInfo} from '../../../utils/webUtils.js'

  import addSalesPlan from './addSalesPlan.vue'
  import editSalesPlan from './editSalesPlan.vue'

  export default {
    name: 'TictReport',
    components: {addSalesPlan, editSalesPlan},
    data() {
      return {
        currentEdituuid: '',
        addDialogVisible: false,
        editDialogVisible: false,
        formAlignLeft: 'left',
        editBoxShow: false,
        addShow: false,
        editShow: false,
        pwdShow: false,
        userSchOn: '',
        userEdit: false,
        tickValue: [],
        yardOptions:[],
        uuid: '',
        searchDate: {tictKind: '', tictName: '',adr:''},
        salesPlanData: [],
        auditState: { Review: '审核中', Pass: '通过', Deny: '拒绝','':'全部',NoSmt:'未提交'},
        tictPage: {
          pageSize: 10, // 每页显示条目个数
          currentPage: 1, // 当前页数
          totalElements: 0,
          searchData: {
            merchUuid: '',
            tictKind: '',
            tictName: '',
            adr:''

          },
        },
        mercList: this.mercList,
        merchants: {name: '', uuid: ''}
      }
    },
    created() {
      this.queryKinds()
      this.queryYard()
      this.querySalesPlan(this.searchDate)

    },
    methods: {
      // 查询场地
      queryYard() {
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/yard/search/findAllTree',
            params: {}
          })
          .then(response => {
            this.yardOptions = response.data[0].subs
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 导出
      exportAble() {
        window.location.href = this.axios.defaults.baseURL + '/tck/salesPlan/export'
      },
      // 票务种类
      queryKinds() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TCK_KINDS',
            params: {}
          })
          .then(response => {
            this.tickValue = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 查询
      changeAuditState() {
        this.querySalesPlan(this.searchDate)
      },
      // 重置重置
      restart() {
        this.searchDate.tictKind = ''
        this.searchDate.tictName = ''
        this.searchDate.adr=''
        this.querySalesPlan(this.searchDate)
      },
      cancelAddDlg() {
        this.addDialogVisible = false
      },
      addSalesPlan() {
        this.$router.push("/addSalesPlan")
      },
      saveEditDlg() {
        this.$refs.editSalesPlan.submit()
      },
      saveAddDlg() {
        this.$refs.addSalesPlan.submit()
      },
      editSalesPlan(val) {
        this.uuid = val.uuid
        this.$router.push("/editSalesPlan/"+this.uuid)
      },
      cancelEditDlg() {
        this.editDialogVisible = false
      },
      closeDialog() {
        this.addDialogVisible = false
        this.editDialogVisible = false
        this.querySalesPlan(this.searchaDate)
      },
      editState(msg) {
        this.editBoxShow = msg
        this.editShow = msg
        this.addShow = msg
        this.userEdit = msg
        this.querySalesPlan(this.searchaDate)
      },
      submitAudit(val) {
        this.$confirm('确认提交审核 ' + val.tictName + ' ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.request({
            method: 'put',
            url: './tck/plan/ticketing-plan/review' + val.uuid,
            data: {adr: 'Review'}
          }).then((response) => {
            console.log(response)
            this.$message({
              message: '提交成功!',
              type: 'success'
            })
            this.querySalesPlan(this.searchaDate)
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
      },
      deleteSalesPlan(val) {
        this.$confirm('确认删除 ' + val.tictName + ' ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.request({
            method: 'delete',
            url: './tck/kdi/salan/' + val.uuid,
            data: {}
          }).then(() => {
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
            this.querySalesPlan(this.searchaDate)
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      userChge(val) {
        if (this.userEdit) {
          this.uuid = val.uuid
        }
      },
      // 获取所有数据
      querySalesPlan(param) {
        if(param!=null&&param!=''){
        if(param.tictName!=''&&param.tictName!=null){
        this.tictPage.searchData.tictName = param.tictName
        }
        if(param.tictKind!=null&&param.tictKind!=''){
        this.tictPage.searchData.tictKind = param.tictKind
        }
        if(param.adr!=null){
          this.tictPage.searchData.adr=param.adr
        }
        }
        // 查询商户下所有票务信息
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/merch/search/findByUser',
            params: {}
          })
          .then(response => {
            if (true) {
              this.axios.request({
                method: 'get',
                url: './tck/plan/ticketing-plan/listPlan',
                params: getDataForSP(this.tictPage)
              }).then(response => {
                this.salesPlanData = response.data.data
                writePageInfo(this.tictPage, response.data)
              }).catch(error => {
                console.log(error)
              })
            } else {
              this.merchants = response.data[0]
              this.tictPage.searchData.merchUuid = this.merchants.uuid
              this.axios.request({
                method: 'get',
                url: './tck/public/salan/search/findByMerch',
                params: getDataForSP(this.tictPage)
              }).then(response => {
                this.salesPlanData = response.data.content
                writePageInfo(this.tictPage, response.data)
              }).catch(error => {
                console.log(error)
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 列表分页
      userSize: function (pageSize) {
        this.tictPage.pageSize = pageSize
        if (this.tictPage.currentPage === 1) {
          if (this.userSchOn !== '') {
            // this.userSearch();
          } else {
            this.querySalesPlan(this.searchDate)
          }
        }
        this.tictPage.currentPage = 1
      },
      pgChge(currentPage) {
        this.tictPage.currentPage = currentPage
        this.querySalesPlan(this.searchDate)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
    .pagination{
      padding: 10px 0;
    }
  }

</style>
